<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Simple Blog</title>
        <meta name="description" content="Blite is a lightweight web blog application designed to be quick, easy to use and light on server resources. It's written in PHP and uses a SQLite database. Blite is available for free under a GPL licence.">
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/header.css">
        <link rel="stylesheet" type="text/css" href="css/category-table.css">

    </head>

    <body class="browse">
        <div class="display">
            {header}
            <p style="color: blueviolet; margin-left: 40px; font-weight: bold; font-size: 15px"> Chuyên mục hiện có</p>    
            {category_table}
            <p style="color: blueviolet; margin-left: 40px; font-weight: bold; font-size: 15px"> Thêm chuyên mục mới:</p>
            <div class="addNewCategory">
                <form onsubmit="return validateForm();" action="category.php" method="post">
                    <p>Tên chuyên mục:  <input type="text" name="new_category" id="new_category" /> <br/> <br/>
                        <strong><p> <lable id="error"></lable></p></strong> <br/>
                    <input type="submit" name="add_category" id="add_category" value="Thêm" />
                    </p>

                </form>

                <script type='text/javascript'>

                    function validateForm(){
                        // Make quick references to our fields
                        var categoryName = document.getElementById('new_category');
                        // Check each input in the order that it appears in the form!
                        if(isEmpty(categoryName, "*Chưa nhập tên chuyên mục")){
                            return false;
                        }
                        return true;
	
                    }
                    function isEmpty(elem, helperMsg){
                        if(elem.value.length == 0){
                            var errorLable = document.getElementById('error');
                            errorLable.innerHTML = helperMsg;
                            errorLable.style.color = "Red";
                            errorLable.style.fontFamily="arial,sans-serif";
                            errorLable.style.fontSize = "13px";
                            errorLable.style.fontStyle = "Italic";
                            elem.focus(); // set the focus to this input
                            return true;
                        }
                        return false;
                    }
                </script>

            </div>

            {footer}
        </div>



    </body>
</html>